<template>
  <div class="content">
    <div class="slide">
      <div class="login"></div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="60px"
        class="login_ruleForm"
      >
        <el-form-item label="账号" prop="user_phone">
          <el-input v-model="ruleForm.user_phone" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="user_password">
          <el-input v-model="ruleForm.user_password" clearable show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
          <el-button @click="resetForm('ruleForm')">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { login, register } from "@/http/api.js";
import { Debounce } from "@/unit/Debounce.js";
export default {
  name: "LbtLogin",
  data() {
    var phone = (rule, value, callback) => {
      let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        if (!reg_tel.test(value)) {
          callback(new Error("请输入正确的手机号"));
        }
        callback();
      }
    };
    return {
      ruleForm: {
        user_phone: "",
        user_password: ""
      },
      rules: {
        user_phone: [{ required: true, validator: phone, trigger: "change" }],
        user_password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 10,
            message: "长度在 6 到 10 个字符",
            trigger: "change"
          }
        ]
      }
    };
  },

  mounted() {},

  methods: {
    submitForm: Debounce(function(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.getlogin();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }, 500),
    resetForm: Debounce(function(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.user_register();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }, 500),
    async getlogin() {
      let parms = {
        user_phone: this.ruleForm.user_phone,
        user_password: this.ruleForm.user_password
      };
      let data = await login(parms);
      if (data.token) {
          this.$cookies.set("token", data.token);
        this.$router.push("/");
      }
      console.log(data)
      if(data.status !== 200) {
        this.$message.error(data.message)
      }
    },
    async user_register() {
      let parms = {
        user_phone: this.ruleForm.user_phone,
        user_password: this.ruleForm.user_password
      };
      let data = await register(parms);
      console.log(data);
      if (data.status == 200) {
        this.$message({
          message: data.message + ", 用户id:" + data.data.user_id,
          type: "success"
        });
      } else if (data.status == 201) {
        this.$message({
          message: data.message,
          type: "warning"
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    115deg,
    rgb(86, 248, 215),
    rgba(254, 195, 131, 0.9)
  );
  .slide {
    width: 400px;
    position: absolute;
    top: 40%;
    left: 50%;
    margin-top: -150px;
    margin-left: -200px;
    border-radius: 10px;
    padding: 50px;
    box-sizing: border-box;
    background: inherit;
    .login {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit;
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      -ms-filter: blur(5px);
      -o-filter: blur(5px);
      filter: blur(5px);
      filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);
    }
    .login_ruleForm {
      -webkit-filter: blur(0);
      -moz-filter: blur(0);
      -ms-filter: blur(0);
      -o-filter: blur(0);
      filter: blur(0);
    }
  }
}
</style>